<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="75%"
    :before-close="close"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-scrollbar max-height="60vh" v-loading="taskLoading || loading">
      <TaskShowForm ref="taskShowForm" />
      <el-form
        v-if="isApprove === EDetailType.APPROVE"
        ref="formRef"
        :model="formData"
        :rules="rules"
        scroll-to-error
        label-width="100px"
      >
        <el-form-item label="审批意见" prop="processOpinion">
          <el-input
            v-model="formData.processOpinion"
            type="textarea"
            :autosize="{
              minRows: 5,
            }"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">
          {{ isApprove === EDetailType.APPROVE ? '取消' : '关闭' }}
        </el-button>
        <template v-if="isApprove === EDetailType.APPROVE">
          <el-button type="danger" :loading="loading" @click="submit(4)">
            不通过
          </el-button>
          <el-button type="primary" :loading="loading" @click="submit(3)">
            通过
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, nextTick, reactive, ref, useTemplateRef } from 'vue'
import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
import TaskShowForm from '@/views/mission/taskApproval/TaskShowForm.vue'
import { getTaskDetailById, submitTask } from '@/api/mission/task'
import { EDetailType } from '@/views/application/typings'
import useFetch from '@/hooks/useFetch'
import { Message } from '@/hooks/message'

const emit = defineEmits(['update'])
const taskShowForm =
  useTemplateRef<InstanceType<typeof TaskShowForm>>('taskShowForm')
const formRef = useTemplateRef<FormInstance>('formRef')

const dialogVisible = ref(false)
const loading = ref(false)
const taskId = ref(null)
const formData = reactive({
  processOpinion: '',
})

const rules = ref<FormRules<typeof formData>>({
  processOpinion: {
    required: true,
    message: '请输入审批意见',
    trigger: 'blur',
  },
})

function close() {
  dialogVisible.value = false
  loading.value = false
  taskId.value = null
  formRef.value.resetFields()
  isApprove.value = EDetailType.APPROVE
  Object.assign(formData, {
    processOpinion: '',
  })
  taskShowForm.value.close()
}

defineExpose({ show })

const isApprove = ref(EDetailType.APPROVE)

const title = computed(() => {
  return isApprove.value === EDetailType.APPROVE ? '审批任务' : '任务详情'
})

const {
  loading: taskLoading,
  execute,
  onFetchSuccess,
} = useFetch(getTaskDetailById)

onFetchSuccess((data) => {
  nextTick(() => {
    taskShowForm.value.show(data)
  })
})

async function show(row: any, approve = EDetailType.APPROVE) {
  dialogVisible.value = true
  isApprove.value = approve
  taskId.value = row.id
  await execute(row.id)
}

function submit(status: 3 | 4) {
  formRef.value.validate(async (bool: boolean) => {
    if (!bool) {
      return
    }

    ElMessageBox.confirm(
      `确定${status === 3 ? '通过' : '不通过 '}吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(async () => {
      const postData = {
        type: status,
        taskId: taskId.value,
        processOpinion: formData.processOpinion,
      }
      loading.value = true
      const { data } = await submitTask(postData)
      if (data.status === 200) {
        Message({
          message: data.message,
          type: 'success',
        })
        emit('update')
        close()
      }
      loading.value = false
    })
  })
}
</script>

<style scoped lang="scss"></style>
